<template>
  <div class="banxin article_page">
    <el-breadcrumb separator="/" style="padding:20px 0">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <!-- <el-breadcrumb-item><a href="/">文章列表</a></el-breadcrumb-item> -->
  <el-breadcrumb-item :to="{ path: '/' }">文章列表</el-breadcrumb-item>
  <el-breadcrumb-item>文章内容浏览</el-breadcrumb-item>
  <!-- <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
</el-breadcrumb>
    <h2>{{title}}</h2>
    <h4>({{subTitle}})</h4>
    <section>
        <span>作者：{{author}}</span>
        <span>日期：{{date}}</span>
    </section>
    <hr/>
    <div class="content" v-html="content"></div>
  </div>
</template>

<script>
    import {ArticleIdApi  } from '../../request/api'
    export default {
        data(){
            return{
                title:'',
                subTitle:"",
                author:"",
                date:'',
                content:""
            }
        },
        async asyncData({query}) {
            let result = await ArticleIdApi({id:query.id})
            console.log(result)
            if(result.errCode == 0){
                return{...result.data}
            /* result.data.forEach(element => {
                element.date = moment(element.date).startOf('day').fromNow()
            });
                return{
                } */
            }
        },
    }
</script>

<style  scoped lang="less">
.article_page{
    h2{
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        margin-bottom:20px ;
    }
    h4{
        text-align: center;
        font-size: 16px;
        margin-bottom:20px ;
    }
    section{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom:20px ;
    }
    /deep/.content{
        p{
            text-indent:2em;
            line-height: 26px;
        }
        img{
            display: block;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
}
</style>